<template>
  <div
    v-if="announcements.length > 0"
    class="announcement-bar"
    @click.capture="handlePreviewClick"
    @click="openModal"
  >
    <i class="ri-notification-3-line icon"></i>
    <div class="carousel-wrapper">
      <Transition :name="transitionName" mode="out-in">
        <span :key="currentIndex" class="content">
          <strong v-text="currentAnnouncement.title + ':'"></strong>
          <span v-html="currentAnnouncement.content"></span>
        </span>
      </Transition>
    </div>
    <div class="meta" v-if="currentAnnouncement.author || currentAnnouncement.timeAgo">
      <span class="dot">•</span>
      <span
        class="time"
        v-if="currentAnnouncement.timeAgo"
        v-text="currentAnnouncement.timeAgo"
      ></span>
    </div>
    <i class="ri-arrow-right-s-line arrow-icon"></i>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  announcements: {
    type: Array,
    required: true,
    default: () => [],
  },
})

const emit = defineEmits(['open-modal'])

const currentIndex = ref(0)
const intervalId = ref(null)
const transitionName = ref('slide-up')

const currentAnnouncement = computed(() => {
  const ann = props.announcements[currentIndex.value] || {}
  // 去除换行相关标签，保证轮播条内容单行
  return {
    ...ann,
    content: (ann.content || '').replace(/<br\s*\/?>|<\/p>|<p>/gi, ' ').replace(/\n/g, ' '),
  }
})

const startCarousel = () => {
  stopCarousel() // ensure no multiple intervals running
  intervalId.value = setInterval(() => {
    transitionName.value = 'slide-up'
    currentIndex.value = (currentIndex.value + 1) % props.announcements.length
  }, 5000) // Change every 5 seconds
}

const stopCarousel = () => {
  clearInterval(intervalId.value)
}

const openModal = () => {
  emit('open-modal')
}

// 预览条内若点击到超链接，阻止默认跳转，仅打开弹窗
function handlePreviewClick(event) {
  const anchor = event.target && event.target.closest && event.target.closest('a')
  if (anchor) {
    event.preventDefault()
  }
}

onMounted(() => {
  if (props.announcements.length > 1) {
    startCarousel()
  }
})

onUnmounted(() => {
  stopCarousel()
})
</script>

<style scoped>
.announcement-bar {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  padding: 0.6em 1em;
  border-radius: var(--radius-large);
  margin-bottom: 1.2em;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.announcement-bar:hover {
  border-color: var(--color-primary);
}
.icon {
  font-size: 1.1em;
  color: var(--color-primary);
}
.carousel-wrapper {
  flex-grow: 1;
  overflow: hidden; /* Hide overflowing text */
}
.content {
  display: flex;
  align-items: center;
  font-size: 0.85em;
  color: var(--text-regular);
  line-height: 1.4;
}
.content strong {
  font-weight: 600;
  color: var(--text-primary);
  margin-right: 0.5em;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.content span {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content a {
  pointer-events: none; /* 避免滚动条状态下误触跳转，需在弹窗内点击 */
}
.arrow-icon {
  font-size: 1em;
  color: var(--text-secondary);
}

.meta {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin-left: 0.5em;
  font-size: 0.78em;
  color: var(--text-secondary);
  white-space: nowrap;
}
.meta .dot {
  color: var(--text-secondary);
}
.meta .author {
  color: var(--text-secondary);
}
.meta .time {
  color: var(--text-placeholder);
}

/* Transition for carousel */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.5s ease-in-out;
}
.slide-up-enter-from {
  opacity: 0;
  transform: translateY(20px);
}
.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

@media (max-width: 500px) {
  .announcement-bar {
    padding: 0.5em 0.7em;
    gap: 0.5em;
    margin-bottom: 1em;
    align-items: baseline;
  }
  .icon {
    font-size: 1em;
  }
  .arrow-icon {
    font-size: 1em;
  }
  .content {
    font-size: 0.8em;
    line-height: 1.3;
    display: flex;
    align-items: center;
  }
  .content strong {
    /* 不再设置max-width */
  }
}
</style>
